<template>
  <a-modal
    class="productManage"
    :visible="visible"
    :title="'添加标签'"
    :maskClosable="false"
    :destroyOnClose="true"
    :keyboard="false"
    :closable="true"
    :confirmLoading="confirmLoading"
    width="700px"
    @cancel="closeModal()"
    @ok="handleSubmit"
  >
    <div>
      <div>
        <div class="add_btn" @click="addNewLabel">
          <img
            class="icon_add"
            src="~@images/shop/icon_right_attributebar_jiahao.png"
          />
          <span class="text">新增标签</span>
        </div>
      </div>
      <a-divider />
      <div class="tags">
        <div
          :class="['lableItem', videoTagIds.indexOf(l.id) >= 0 ? 'active' : '']"
          v-for="(l, i) in allTags"
          :key="i"
          @click="chooseLable(l)"
        >
          {{ l.name }}
        </div>
      </div>
    </div>
    <addLable
      ref="addLable"
      :shopRoleCode="shopRoleCode"
      opration="add"
      :type="true"
      @getAllTags="getAllTags"
    >
    </addLable>
    <template slot="footer">
      <a-button key="back" @click="closeModal"> 取消 </a-button>
      <a-button key="submit" type="primary" @click="handleSubmit">
        确定
      </a-button>
    </template>
  </a-modal>
</template>
<script>
import addLable from "./addLable.vue";

export default {
  name: "addVideoTag",
  components: {
    addLable,
  },
  props: {
    labelIds: {
      // 默认选中的行
      type: Array,
      default: () => [],
    },
    shopRoleCode: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      visible: false,
      confirmLoading: false,
      allTags: [],
      videoTagIds: [],
      allTagNum: 0, //标签数量
    };
  },
  methods: {
    handleSubmit() {
      this.confirmLoading = true;
      let arr = [];
      this.allTags.forEach((item) => {
        this.videoTagIds.forEach((l) => {
          if (item.id == l) {
            arr.push(item);
          }
        });
      });
      this.$emit("comfirmLanleId", this.videoTagIds, arr);
      this.visible = false;
    },
    closeModal() {
      this.visible = false;
      this.$emit("cancel", false);
    },
    async getAllTags() {
      let res = await this.$get("video/label/list");
      if (res && res.returnCode == 1000) {
        this.allTags = res.dataInfo;
        this.allTagNum = 0;
        if (this.shopRoleCode == "role:store:main") {
          this.allTags.forEach((item) => {
            if (item.totalShopLabel) {
              this.allTagNum++;
            }
          });
        } else {
          this.allTags.forEach((item) => {
            if (!item.totalShopLabel) {
              this.allTagNum++;
            }
          });
        }
      }
    },
    chooseLable(l) {
      if (this.videoTagIds.indexOf(l.id) >= 0) {
        this.videoTagIds = this.videoTagIds.filter((item) => {
          return item != l.id;
        });
      } else {
        if (this.videoTagIds.length >= 5) {
          this.$message.warning("每个视频最多可添加5个标签");
        } else {
          this.videoTagIds.push(l.id);
        }
      }
      // console.log(this.videoTagIds);
    },
    addNewLabel() {
      if (this.shopRoleCode == "role:store:main") {
        if (this.allTagNum >= 20) {
          this.$message.warning("总店最多可创建20个标签");
        } else {
          this.$refs.addLable.visible = true;
        }
      } else {
        if (this.allTagNum >= 10) {
          this.$message.warning("分店最多可创建10个标签");
        } else {
          this.$refs.addLable.visible = true;
        }
      }
    },
  },
  watch: {
    visible(y) {
      if (y) {
        this.getAllTags();
        this.videoTagIds = JSON.parse(JSON.stringify(this.labelIds));
        // console.log(this.videoTagIds);
      }
    },
  },
};
</script>
<style scoped lang="less">
.add_btn {
  cursor: pointer;
  height: 30px;
  line-height: 30px;
  width: 150px;
  position: relative;
  text-align: center;
  font-family: MicrosoftYaHei;
  font-size: 14px;
  background-color: #fff;
  color: #016bff;
  border: 1px solid #016bff;
  .icon_add {
    position: absolute;
    top: 50%;
    left: 4px;
    transform: translateY(-50%);
    width: 25px;
    height: 25px;
  }
  .text {
    color: #016bff;
  }
}
.tags {
  display: flex;
  flex-wrap: wrap;
  margin-top: -10px;
  .lableItem {
    padding: 5px 12px;
    border-radius: 100000px;
    color: #000;
    background: #b5b5b5;
    margin: 10px;
    cursor: pointer;
  }
  .active {
    color: #fff;
    background: #79d1f7;
  }
}
</style>